import React, { Component } from "react";
import Message from "./components/Message";
import ListCard from "./components/ListCard";
import Tag from "./components/Tag";
import "./me.scss";

class Me extends Component {
    constructor(props) {
        super(props);
        this.state = {};
    }

    render() {
        return (
            <div className="me">
                {/* 用户头像信息区域 */}
                <div className="touxiang">
                    <div className="sanjiao"></div>
                    <div className="sanjiao2"></div>
                    <div className="top">
                        <div className="left">
                            <i className="iconfont">&#xe9d4;</i>
                            <span>消费者权益中心</span>
                            <i className="iconfont">&#xe622;</i>
                        </div>
                        <div className="right">
                            <i className="iconfont">&#xe621;</i>
                            <i className="iconfont">&#xe892;</i>
                        </div>
                    </div>
                    <div className="bottom">
                        <div className="touxiang_left">
                            <div className="img">
                                <i className="iconfont">&#xe634;</i>
                            </div>
                            <div className="number">
                                <span>15624631135</span>
                                <p>
                                    <span>
                                        个人中心
                                        <i className="iconfont">&#xe622;</i>
                                    </span>
                                </p>
                            </div>
                        </div>
                        <div className="button">
                            <span>签到</span>
                        </div>
                    </div>
                </div>
                {/* 消息区域 */}
                <Message>62元开通62vip，年省3356元</Message>

                {/* 列表卡片 */}
                <ListCard>
                    <Tag title="管家" icon="&#xe941;">
                        银行卡
                    </Tag>
                    <Tag title="账单" icon="&#xe62b;"></Tag>
                    <Tag title="借款" icon="&#xe628;">
                        最高可借20万
                    </Tag>
                    <Tag title="信用报告" icon="&#xe657;"></Tag>
                </ListCard>
                <ListCard className="list_card" mg_t="15px">
                    <Tag title="奖励" icon="&#xe6d1;">
                        红包 票卷
                    </Tag>
                    <Tag title="积分" icon="&#xe600;">
                        积分查询 联盟通兑
                    </Tag>
                    <Tag title="会员中心" icon="&#xe64e;">
                        62VIP 年省3352元
                    </Tag>
                </ListCard>
                <ListCard className="list_card" mg_t="15px">
                    <Tag title="小程序" icon="&#xe63c;"></Tag>
                    <Tag title="精选服务" icon="&#xe648;">
                        游戏 商城 热门
                    </Tag>
                </ListCard>
            </div>
        );
    }
}
export default Me;
